<template>
<div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-menu"></i> 实验室管理系统</el-breadcrumb-item>
            <el-breadcrumb-item>实验室详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
        <el-table :data="tableData"  border style="width: 100%;margin: 20px">
            <el-table-column type="index" width="70" label="序号"></el-table-column>
            <el-table-column prop="doorNumber" label="门牌号" ></el-table-column>
            <el-table-column prop="labName" label="实验室名称"></el-table-column>
            <el-table-column prop="labManager" label="负责人"></el-table-column>
            <el-table-column prop="phoneNumber" label="负责人电话" ></el-table-column>
            <el-table-column prop="labType" label="实验室类型"></el-table-column>
            <el-table-column prop="department" label="所属部门" ></el-table-column>
            <el-table-column prop="computerNumber" label="电脑台数"></el-table-column>
            <el-table-column prop="availableComputer" label="电脑可用台数"></el-table-column>
            <el-table-column prop="configuration" label="电脑配置"></el-table-column>
            <el-table-column prop="software" label="可用软件"></el-table-column>
            <el-table-column prop="labIntroduction" label="实验室介绍" ></el-table-column>
            <el-table-column prop="labType" label="实验室类型"></el-table-column>
            <el-table-column prop="software" label="软件配置"></el-table-column>
            <el-table-column prop="configuration" label="设备配置"></el-table-column>
        </el-table>
        </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="15"
            layout="prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>

</div>
</template>

<script>
    export default {
        data() {
            return {
                pageNum:1,
                count:0,
                tableData: [{
                    doorNumber:'',
                    labName:'',
                    labManager:'',
                    phoneNumber:'',
                    labType:'',
                    department:'',
                    computerNumber:'',
                    availableComputer:'',
                    configuration:'',
                    software:'',
                    labIntroduction:'',
                    software:'',
                    configuration:'',
                }]
            };
        },
        created(){
            this.getData();
        },
        methods:{
            getData(){
                this.$axios.get('/text/lab/querycomputer')
                this.$axios.get('text/lab/query?pageNum=1').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData= res.data.data.list;
                    this.count= res.data.data.total;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pageNum) {
                this.$axios.get('text/lab/query?pageNum='+pageNum).then((res) => {
                    this.tableData= res.data.data.list;
                })
            }
        }
    }
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 20px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>
